<template>
    <div class="course1">
        <h2><slot></slot><span style="font-size: 16px;float: right;margin-right: 10px;color: #999999">更多<a-icon type="right-circle" style="margin-left: 5px"/></span></h2>
        <div class="box1">

            <div
                    class="course"
                    v-for="(item) in courseList"
                    :key="item.courseId"
            >
                <dl class="changGreen">

                        <dt>
                            <router-link :to="{path:'/detail',query:{course:item.courseId}}">
                                <img :src="item.coverFileUrl" alt="" />
                            </router-link>
                        </dt>
                        <dt class="title">{{item.courseTitle}}</dt>
                        <dt class="gray">{{item.participationsCount}} 节课 | {{item.learningNum}} 人报名</dt>
                        <dt v-if="item.isFree=='1'" style="color: rgb(0,207,140);">免费</dt>
                        <dt v-else-if="item.isDiscount=='0'"><span style="color: red; font-size: 16px;">&yen;{{item.coursePrice}}</span></dt>
                        <dt v-else>
                            <span style="color: red; font-size: 16px;">&yen;{{item.discountPrice}}</span>
                            &nbsp;&nbsp;
                            <span style="color: gray; text-decoration: line-through; font-size: 12px;">&yen;{{item.coursePrice}}</span>
                            <span style="color: #fa8c16; background: #fff7e6;border:1px solid #ffd591; float: right; font-size: 12px; padding: 5px;">{{item.discountDesc}}</span>
                            <div style="clear: both;"></div>
                        </dt>

                </dl>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Course",
        data(){
            return{
                courseList:[]
            }
        },
        props:{
            coursetype:{
                type:String,
                default:"free"
            },
            pagesize:{
                type:[String,Number],
                default:5
            }
        },
        created(){
            // 3个课程
            let fo = new URLSearchParams();
            fo.append("type", this.coursetype);
            fo.append("pageNum", 1);
            fo.append("pageSize", this.pagesize);
            this.$axios.post('http://wkt.myhope365.com/weChat/applet/course/list/type',fo).then(res=>{
                // console.log(res);
                this.courseList = res.data.rows;
            }).catch(err=>{
                console.log(err);
            })
        }
    }
</script>

<style scoped>
    .box1 {

        width: 1200px;
        /* min-width: 1200px; */
        margin: auto;
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .course {
        width: 20%;
        height: 200px;
        margin-bottom: 10px;
        /* background-color: aqua; */
        padding-right: 10px;
        box-sizing: border-box;
    }
    h2{
        margin: auto;
        padding-bottom: 10px;
        width: 1200px;
        border-bottom: 1px solid gainsboro;
        text-align: center;
    }
    .course1 {
        margin-bottom: 50px;
    }
    .gray {
        color: gray;
    }
    .box1>div>dl>dt {
        overflow: hidden;
    }
    .box1>div>dl img {
        width: 110%;
        height: 150px;
        margin-left: -10px;
        margin-top: -8px;
        transform: scale(0.9,0.9);
        transition-duration: 1s;
    }
    .box1>div>dl img:hover {
        transform: none;
    }
    /deep/.title {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        color: black;
    }
    .changGreen:hover>.title {
        color: rgb(0,207,140);
    }

</style>